<template>
  <div>
    <CommonContainer title="提交信审批复建议">
<!--      <template v-slot:rightInfo>-->
<!--        <div class="rightInfo" @click="goHistoryCreditRecord">查看客户历史信审记录</div>-->
<!--      </template>-->
      <el-form ref="approveSuggestForm" :model="form" label-width="120px" :rules="rules">
        <el-form-item label="信审批复建议:" prop="approval">
          <el-radio-group v-model="form.approval">
            <el-radio :label="7">全部通过</el-radio>
            <el-radio :label="8">部分通过</el-radio>
            <el-radio :label="9">拒绝</el-radio>
          </el-radio-group>
        </el-form-item>
        <div style="margin-bottom: 20px">
          <p class="quota">信审额度</p>
          <div class="table-title-wrap flex-row-center">
            <p class="statisticInfo">申请总台数: <span>{{ form.application }}</span></p>
            <p class="statisticInfo">通过总台数: <span>{{ form.pass }}</span></p>
            <p class="statisticInfo">拒绝总台数: <span>{{ form.refuse }}</span></p>
          </div>
          <el-table
              :data="resultCars"
              :header-cell-style="{ background: '#FAFAFA', color: '#000000' }" border>
            <el-table-column
                align="center"
                prop="vehicleManufacturers"
                label="车辆厂商"
                min-width="120">
            </el-table-column>
            <el-table-column
                align="center"
                prop="vehicleModel"
                label="车辆车型"
                min-width="120">
            </el-table-column>
            <el-table-column
                align="center"
                prop="vehicleStyle"
                label="车辆款型"
                min-width="120">
            </el-table-column>
            <el-table-column
                align="center"
                prop="carNo"
                label="车牌号"
                min-width="120">
            </el-table-column>
            <el-table-column
                align="center"
                prop="vehicleEnergyType"
                label="车辆能源类型"
                min-width="120">
            </el-table-column>
            <el-table-column
                align="center"
                prop="registrationNature"
                label="登记性质"
                min-width="120">
            </el-table-column>
            <el-table-column
                align="center"
                prop="applicationType"
                label="申请类型"
                min-width="120">
            </el-table-column>
            <el-table-column
                align="center"
                prop="leaseTerm"
                label="租赁期限(月)"
                min-width="120">
            </el-table-column>
            <el-table-column
                align="center"
                prop="rentPaymentMethod"
                label="租金支付方式"
                min-width="120">
            </el-table-column>
            <el-table-column
                align="center"
                prop="mileageLimit"
                label="里程限制（公里)"
                min-width="120">
            </el-table-column>
            <el-table-column
                align="center"
                prop="registeredCity"
                label="上牌城市"
                min-width="120">
            </el-table-column>
            <el-table-column
                align="center"
                prop="registrationFee"
                label="上牌费"
                min-width="120">
            </el-table-column>
            <el-table-column
                align="center"
                prop="insurancePremium"
                label="保险费"
                min-width="120">
            </el-table-column>
            <el-table-column
                align="center"
                prop="maintenancePremium"
                label="维保费"
                min-width="120">
            </el-table-column>
            <el-table-column
                align="center"
                prop="purchaseTax"
                label="购置税"
                min-width="120">
            </el-table-column>
            <el-table-column
                align="center"
                prop="vehicleAndVesselTax"
                label="车船税"
                min-width="120">
            </el-table-column>
            <el-table-column
                align="center"
                prop="installationCost"
                label="加装费用"
                min-width="120">
            </el-table-column>
            <el-table-column
                align="center"
                prop="otherExpenses"
                label="其他费用"
                min-width="120">
            </el-table-column>
            <el-table-column
                align="center"
                prop="irr"
                label="IRR（含牌照）"
                min-width="120">
              <template v-slot="{row}">
                <template v-if="row.irr">{{row.irr}}%</template>
                <template v-else>--</template>
              </template>
            </el-table-column>
            <el-table-column
                align="center"
                prop="margin"
                label="保证金"
                min-width="120">
            </el-table-column>
            <el-table-column
                align="center"
                prop="monthlyRent"
                label="月租金"
                min-width="120">
            </el-table-column>
            <el-table-column label="首期租金、比例" align="center" prop="firstInstallmentRent" min-width="150px" show-overflow-tooltip>
              <template v-slot="{row}">
                <template v-if="row.firstInstallmentRentalRatio">
                  {{ row.firstInstallmentRent }} 、{{ row.firstInstallmentRentalRatio }}%
                </template>
                <template v-else>
                  -- 、--
                </template>

              </template>
            </el-table-column>
            <el-table-column label="残值、比例" align="center" prop="totalApplicationNumber" min-width="120px" show-overflow-tooltip>
              <template v-slot="{row}">
                <template v-if="row.residualValueRatio">
                  {{ row.residualValue }} 、 {{ row.residualValueRatio }}%
                </template>
                <template v-else>
                  -- 、--
                </template>

              </template>
            </el-table-column>
            <el-table-column
                align="center"
                prop="suggestedPrice"
                label="厂商指导价"
                min-width="120">
            </el-table-column>
            <el-table-column
                align="center"
                prop="purchasePrice"
                label="新车采购单价"
                min-width="120">
            </el-table-column>
            <el-table-column
                align="center"
                prop="currentValuation"
                label="旧车当前估值"
                min-width="120">
            </el-table-column>

            <el-table-column
                align="center"
                label="通过台数"
                min-width="160"
                fixed="right"
            >
              <template v-slot="{row}">
                <el-form-item style="margin-top: 15px;width: 100%" label-width="0" prop="numberOfUnitsPassed" :rules="{
                                 required: true,
                                 message: '请填写通过台数',
                                 trigger: 'blur',
                                 validator: (rule, value, callback) => validData(rule, row.numberOfUnitsPassed, callback)
                               }">
                  <el-input-number :precision="0" :disabled="form.approval==8?false:true" v-model="row.numberOfUnitsPassed" :min="0"
                                   :max="row.numberOfApplications" onkeyup="value=value.replace(/[^\d||/.]/g,'')"
                  ></el-input-number>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column
                align="center"
                prop="updateTime"
                label="拒绝台数"
                min-width="160"
                fixed="right"
            >
              <template v-slot="{row}">
                <el-input-number disabled v-model="row.rejectedUnits"></el-input-number>
              </template>
            </el-table-column>
            <el-table-column
                align="center"
                prop="numberOfApplications"
                label="申请台数"
                min-width="120" fixed="right">
            </el-table-column>
          </el-table>
        </div>


        <el-form-item label="说明:" prop="remark">
          <el-input type="textarea" v-model="form.remark" placeholder="请输入说明"></el-input>
        </el-form-item>
        <el-form-item label="附件:" class="form-img" style="margin-top: 40px;height: auto">
          <image-common :up-type="2" info="上传附件" :limit="20" v-model="form.annex"></image-common>
        </el-form-item>
      </el-form>
    </CommonContainer>
<!--    <history-credit-record ref="historyCreditRecord2"></history-credit-record>-->
  </div>

</template>

<script>
import HistoryCreditRecord from "@/views/letterReview/letterReview/components/HistoryCreditRecord.vue";
import {submitSuggestions} from '@/api/letterReview/letterReview'

export default {
  components: {
    HistoryCreditRecord
  },
  props: {
    results: {
      type: Object,
      default: () => {
        return {}
      }
    },
    customerNo: {
      type: String,
      default: ''
    }
  },
  data() {
    // 这里存放数据
    return {
      form: {
        id: this.$route.query.id,
        approval: 7,
        application: 0,
        pass: 0,
        refuse: 0,
        remark: null,
        annex: null,
        cars: []

      },
      cars: [],
      rules: {
        approval: [
          {required: true, message: '请选择信审批复建议', trigger: 'change'},
        ]
      }
    }
  },
  computed: {
    resultCars() {
      let cars = this.cars;
      let pass = 0;
      if (cars.length > 0) {
        cars = cars.map((item) => {
          item.rejectedUnits = item.numberOfApplications - (item.numberOfUnitsPassed||0)
          pass += (item.numberOfUnitsPassed||0)
          return item
        })
      }
      this.form.pass = pass;
      this.form.refuse = this.form.application - this.form.pass
      return cars;
    }
  },
  watch: {
    'form.approval': {
      handler(value) {
        // 总台数
        this.$nextTick(() => {
          let total = 0
          if (this.cars.length > 0) {
            this.cars = this.cars.map((item) => {
              total += Number(item.numberOfApplications)
              if (value == 7) {//全部通过
                item.numberOfUnitsPassed = item.numberOfApplications
                item.rejectedUnits = 0
              } else if (value == 8) {//部分通过
                item.rejectedUnits = item.numberOfApplications
                item.numberOfUnitsPassed = 0
              } else if (value == 9) {//全部拒绝
                item.numberOfUnitsPassed = 0
                item.rejectedUnits = item.numberOfApplications
              }
              return item
            })
            this.form.application = total
            if (value == 7) {//全部通过
              this.form.pass = total
              this.form.refuse = 0
            } else if (value == 8) {//部分通过
              this.form.pass = 0
              this.form.refuse = total
            } else if (value == 9) {//全部拒绝
              this.form.pass = 0
              this.form.refuse = total
            }
          }
        })
      },
      immediate: true,
      deep: true
    },

  },
  // 方法集合
  methods: {
    saveSubmit() {
      this.form.cars = this.resultCars.map((item) => {
        const obj = {
          vehicleStyleNo: item.vehicleStyleNo,
          numberOfApplications: item.numberOfApplications,
          numberOfUnitsPassed: item.numberOfUnitsPassed,
          rejectedUnits: item.rejectedUnits,
          id: item.id
        }
        return obj
      })

      this.$refs['approveSuggestForm'].validate((valid) => {
        if (valid) {
          if(this.form.approval<9&&this.form.pass<=0){
            this.$modal.msgError("通过台数不能为0!");
            return;
          }
          if(this.form.approval==8&&this.form.pass>=this.form.application){
            this.$modal.msgError("部分通过时，通过台数必须小于申请台数");
            return;
          }
          submitSuggestions(this.form).then((res) => {
            this.$message.success('提交成功')
            this.$router.back()
            this.$store.dispatch('tagsView/delView', this.$route)
          })
        }
      })

    },
    goHistoryCreditRecord() {
      this.$refs.historyCreditRecord2.show(this.customerNo)
    },
    validData(rule, value, callback) {
      if (rule.required && value != 0 && !value) {
        callback(new Error(rule.message));
      } else {
        callback();
      }
    },

  },
  // 生命周期 - 挂载完成（可以访问 DOM 元素）
  created() {
    this.cars = this.results.cars;
  },

}
</script>

<style lang="scss" scoped>
.statisticInfo {
  color: #464646;
  font-size: 14px;
  margin-right: 10px;

  span {
    color: #1884FF;
  }
}

.rightInfo {
  font-size: 14px;
  color: #1890FF;
}

.quota {
  font-size: 14px;
  font-weight: bold;
  color: #606266;
  position: relative;
  left: 12px;

  &::before {
    content: '*';
    color: red;
    margin-right: 5px;
  }
}
</style>
